<template>
  <div>
    <div class="header">
      <div class="same">
        <div class="hed">
          <div class="i">
            <i class="el-icon-arrow-left" @click="$router.push('/Me')"></i>
          </div>
          <div class="nav">
            <p
              @click="Add(item.name), (index = i)"
              v-for="(item, i) in list"
              :key="item.id"
              :class="name == item.name ? 'active' : ''"
            >
              {{ item.name }}
            </p>
          </div>
        </div>
        <div class="all">
          <ul>
            <li
              :class="order_name === zz.name ? 'bg1' : ''"
              v-for="(zz, i) in list[index].order"
              :key="i"
              @click="Order(zz.name, i)"
            >
              {{ zz.name }}
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="same">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <div
            class="cart"
            v-show="cart == item.status"
            v-for="item in orderList"
            :key="item.id"
          >
            <div class="til">
              <div class="cart_same">
                <p>萌宠乐园</p>
                <span>{{
                  item.status == 1
                    ? "待付款"
                    : item.status == 2
                    ? "待收货"
                    : item.status == 3
                    ? "待评价"
                    : item.status == 4
                    ? "售后"
                    : "已取消"
                }}</span>
              </div>
            </div>
            <div class="cart_same">
              <div class="shopCart">
                <div class="shop" v-for="(list, i) in item.list" :key="i">
                  <img
                    :src="`http://192.168.10.23:8888/` + list.listUrl"
                    alt=""
                  />
                  <dl>
                    <dt>
                      {{ list.listName }} <span>￥{{ list.listPrice }}</span>
                    </dt>
                    <dd>数量:共{{ list.listCount }}个</dd>
                    <p>
                      共{{ item.list.length }}件商品,合计:￥{{ item.totals }}元
                    </p>
                  </dl>
                </div>
              </div>
              <div class="zhufu">
                <button
                  class="fukuan"
                  v-show="item.status == 1"
                  @click="zhifu(item)"
                >
                  支付
                </button>
                <button
                  class="fukuan"
                  v-show="item.status == 2"
                  @click="zhifu(item)"
                >
                  确认收货
                </button>
                <button
                  class="fukuan"
                  v-show="item.status == 3"
                  @click="zhifu(item)"
                >
                  待评价
                </button>
                <button class="fukuan" v-show="item.status == 4">完成</button>
              </div>
            </div>
          </div>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>
<script>
import { ordersList, ordersEdit } from "@/api/order";
import { Toast } from "vant";
export default {
  data() {
    return {
      isLoading: false,
      name: "实物",
      order_name: "全部",
      index: 0,
      cart: 1,
      list: [
        {
          id: 1,
          name: "实物",
          order: [
            {
              id: 11,
              name: "全部",
              order_list: [],
            },
            { id: 22, name: "待付款" },
            { id: 33, name: "待收货" },
            { id: 44, name: "待评价" },
            { id: 55, name: "售后" },
          ],
        },
        {
          id: 2,
          name: "服务",
          order: [
            { id: 111, name: "全部" },
            { id: 222, name: "待付款" },
            { id: 333, name: "待使用" },
            { id: 444, name: "已使用" },
          ],
        },
        {
          id: 3,
          name: "到家",
          order: [
            { id: 1111, name: "全部" },
            { id: 2222, name: "待付款" },
            { id: 3333, name: "待核销" },
            { id: 4444, name: "配送站" },
            { id: 5555, name: "已完成" },
            { id: 6666, name: "售后" },
          ],
        },
      ],
      orderList: [],
    };
  },
  created() {
    this.ordersList();
    this.index = this.$route.params.index;

    if (this.index == 0) {
      this.name = "实物";
    } else if (this.index == 1) {
      this.name = "服务";
    } else if (this.index == 2) {
      this.name = "到家";
    }
  },

  methods: {
    zhifu(item) {
      // console.log(item);
      let usersid = this.$store.state.user.id;
      let id = item.id;
      let status = item.status;
      let zt = 1;
      switch (status) {
        case 1:
          (zt = 2), Toast("支付成功");
          break;
        case 2:
          (zt = 3), Toast("确认收货");
          break;
        case 3:
          (zt = 4), Toast("留言成功");
          break;
        case 4:
          (zt = 4), Toast("订单已完成");
          break;
        default:
          zt = 1;
          break;
      }

      ordersEdit(id, usersid, zt).then((res) => {
        this.ordersList();
      });
    },
    ordersList() {
      let usersid = this.$store.state.user.id;
      ordersList(usersid).then((res) => {
        // console.log(res, "1111111");
        this.orderList = res.data.data;
      });
    },
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");

        this.isLoading = false;
      }, 1000);
    },
    Add(e) {
      this.order_name = "全部";
      this.name = e;
    },
    Order(add, index) {
      if (index == 0) {
        this.cart = 1;
      } else {
        this.cart = index;
      }
      console.log(add, index);
      this.order_name = add;
    },
  },
};
</script>
<style scoped lang="scss">
.header {
  width: 100%;
  height: 8vh;
  display: flex;
  background: transparent;
  z-index: 5;
  top: 0;
  position: sticky;

  background: rgb(255, 255, 255);
  .el-icon-arrow-left {
    height: 8vh;
    line-height: 8vh;
  }
  .hed {
    width: 100%;
    height: 8vh;
    display: flex;
    justify-content: space-around;
    font-size: 20px;
    margin-left: -20px;
    background: rgb(255, 255, 255);

    text-align: center;
    .nav {
      display: flex;
      align-items: center;
      background: rgb(255, 255, 255);
    }
    p {
      width: 20vw;
      height: 5vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgb(241, 179, 44);
      color: #fff;
    }

    .nav p.active {
      color: rgb(241, 179, 44);
      background: rgb(255, 255, 255);
      border: 1px solid rgb(241, 179, 44);
      box-sizing: border-box;
    }
    .nav p:nth-child(1) {
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
    }
    .nav p:nth-child(3) {
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
    }
  }
  .all {
    width: 100%;
    height: 6vh;
    background: rgb(255, 255, 255);
  }
  .all ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 6vh;
  }
  .bg1 {
    color: rgb(241, 179, 44);
  }
}
.main {
  width: 100%;
  margin-top: 7vh;
  .cart {
    width: 100%;
    height: auto;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    margin-bottom: 2vh;
    .til {
      width: 100%;
      height: 7vh;
      border-bottom: 1px solid #ccc;
      display: flex;
      align-items: center;
      .cart_same {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
    .shopCart {
      width: 100%;
      height: auto;
      .shop {
        width: 100%;
        height: 20vh;
        background: rgb(255, 255, 255);
        border-bottom: 1px solid #ccc;
        margin-top: 3vh;
        margin-bottom: 2vh;
        display: flex;
        img {
          padding: 10px;
          height: 15vh;
          padding-top: 0;
        }
        dl {
          width: 80%;
          font-size: 14px;
          color: #333;
          dt {
            display: flex;
            height: 6vh;
            overflow: hidden;
            span {
              font-weight: bold;
            }
          }
          p {
            margin-top: 3vh;
            text-align: right;
          }
        }
        .van-checkbox-cell-group {
          width: 100%;
          display: flex;
          .van-checkbox {
            width: 10vw;
          }
          .bg {
            background: rgba(255, 255, 255, 0);
          }
        }
      }
    }
    .cart_same {
      width: 90%;
      margin: 0 auto;
    }
  }
  .zhufu {
    display: flex;
    justify-content: right;
    align-items: center;
    height: 5vh;
    .fukuan {
      background: none;
      border: 0;
      background: rgb(236, 155, 32);
      color: #fff;
      padding: 2px 10px;
      border-radius: 6px;
    }
  }
}
</style>
